<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>Directorate</title>
		<meta name="description" content="" />
		<meta name="author" content="HaiNHH1" />

		<meta name="viewport" content="width=device-width; initial-scale=1.0" />

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
		<!--[if lt IE 9]>
		<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<script src="../Javascript/Flot/excanvas.js"></script>
		<![endif]-->
		<!-- The Fonts -->
		<link href="http://fonts.googleapis.com/css?family=Oswald|Droid+Sans:400,700" rel="stylesheet" />
		<!-- The Main CSS File -->
		<link rel="stylesheet" href="../CSS/style.css" />
		<!--MyCSS-->
		<link rel="stylesheet" href="../CSS/hainhh1.css" />
		<!-- jQuery -->
		<script src="../Javascript/jQuery/jquery-1.7.2.min.js"></script>
		<!-- Flot -->
		<script src="../Javascript/Flot/jquery.flot.js"></script>
		<script src="../Javascript/Flot/jquery.flot.resize.js"></script>
		<script src="../Javascript/Flot/jquery.flot.pie.js"></script>
		<!-- DataTables -->
		<script src="../Javascript/DataTables/jquery.dataTables.min.js"></script>
		<!-- ColResizable -->
		<script src="../Javascript/ColResizable/colResizable-1.3.js"></script>
		<!-- jQuryUI -->
		<script src="../Javascript/jQueryUI/jquery-ui-1.8.21.min.js"></script>
		<!-- Uniform -->
		<script src="../Javascript/Uniform/jquery.uniform.js"></script>
		<!-- Tipsy -->
		<script src="../Javascript/Tipsy/jquery.tipsy.js"></script>
		<!-- Elastic -->
		<script src="../Javascript/Elastic/jquery.elastic.js"></script>
		<!-- ColorPicker -->
		<script src="../Javascript/ColorPicker/colorpicker.js"></script>
		<!-- SuperTextarea -->
		<script src="../Javascript/SuperTextarea/jquery.supertextarea.min.js"></script>
		<!-- UISpinner -->
		<script src="../Javascript/UISpinner/ui.spinner.js"></script>
		<!-- MaskedInput -->
		<script src="../Javascript/MaskedInput/jquery.maskedinput-1.3.js"></script>
		<!-- ClEditor -->
		<script src="../Javascript/ClEditor/jquery.cleditor.js"></script>
		<!-- Full Calendar -->
		<script src="../Javascript/FullCalendar/fullcalendar.js"></script>
		<!-- Color Box -->
		<script src="../Javascript/ColorBox/jquery.colorbox.js"></script>
		<!-- Kanrisha Script -->
		<script src="../Javascript/kanrisha.js"></script>
		
	</head>

	<body>
		<div class="widget_contents noPadding">
			<div class="dtTables">
				<div class="dtTop">
					<div class="dtFilter">
						<label class="label"> <h2 style="color: green"> Service Details </h2> </label>
					</div>
					<div class="dtShowPer">
						<input type="button" id="button1" name="Mark In-Active" title="Mark In-Active" class="simple_buttons" value="Mark In-Active" onclick="return confirm('Do you want make this service is inactive?');" />
					</div>
				</div>
				<table class="tables noObOLine">
					<thead>
						<tr>
							<th class="sorting"> Organization Name </th>
							<th class="sorting"> Description </th>
							<th class="sorting"> Roles </th>
							<th class="sorting"></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td> Organization 1 </td>
							<td> First Organization </td>
							<td> Lead, Futher, Delivery </td>
							<td><a href="#" title="Edit" class="bdcC">Edit</a></td>
						</tr>
						<tr>
							<td> Organization 2 </td>
							<td> Second Organization </td>
							<td> Lead, Delivery </td>
							<td><a href="#" title="Edit" class="bdcC">Edit</a></td>
						</tr>
						<tr>
							<td> Organization 3 </td>
							<td> Third Organization </td>
							<td></td>
							<td><a href="#" title="Edit" class="bdcC">Edit</a></td>
						</tr>
					</tbody>
				</table>
				<div class="dtBottom">
					<div class="dtPagination pCenter">
						<a>First</a>
						<a>Previous</a>
						<a class="paginate_active">1</a>
						<a>2</a>
						<a>3</a>
						<a>4</a>
						<a>5</a>
						<a>Next</a>
						<a>Last</a>
					</div>
				</div>
			</div>
			<div class="dialog dConf" style="width: 50px;" title="Role">
				<table class="tables noObOLine">
					<tbody>
						<tr>
							<td>
								<input type="checkbox" class="simple_form"  />
								<span class="label">Lead</span>
							</td>
						</tr>
						<tr>
							<td>
								<input type="checkbox"  checked="checked" class="simple_form"/>
								<span class="label">Futher</span>
							</td>
						</tr>
						<tr>
							<td>
								<input type="checkbox" class="simple_form"  checked="checked" />
								<span class="label">Deliver</span>
							</td>
						</tr>
						<tr>
							<td>
								<input type="checkbox" class="simple_form"/>
								<span class="label">Auditor</span>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</body>
</html>